<template>
    <div class="custom-tree-container">
        <h3 style="text-align: left">分类管理</h3>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark" style="text-align: left">
                    <el-button type="danger" plain @click="dialogAddCate = true">
                        添加分类
                    </el-button>&ensp;
                    <el-button type="danger" plain @click="dialogAddCateGroup = true">
                        添加分组
                    </el-button>&ensp;
                    <el-dialog title="添加分类" :visible.sync="dialogAddCate">
                        <el-form >
                            <el-form-item label="分类名称：" :label-width="formLabelWidth">
                                <el-input  autocomplete="off" style="width: 220px"></el-input>
                            </el-form-item>
                            <el-form-item label="一级分类：" :label-width="formLabelWidth">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="二级分类：" :label-width="formLabelWidth">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="分类级别：" :label-width="formLabelWidth">
                                <el-radio  label="1">顶级分类</el-radio>
                                <el-radio  label="1">一级分类</el-radio>
                                <el-radio  label="1">二级分类</el-radio>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddCate = false">取 消</el-button>
                            <el-button type="primary" @click="dialogAddCate = false">确 定</el-button>
                        </div>
                    </el-dialog>
                    <!-- 添加分组 -->
                    <el-dialog title="添加分组" :visible.sync="dialogAddCateGroup">
                        <el-form >
                            <el-form-item label="分组名称：" :label-width="formLabelWidth">
                                <el-input  autocomplete="off" style="width: 220px"></el-input>
                            </el-form-item>
                            <el-form-item label="顶级分类：" :label-width="formLabelWidth">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogAddCateGroup = false">取 消</el-button>
                            <el-button type="primary" @click="dialogAddCateGroup = false">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
        <div class="block">
           
            <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            default-expand-all
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                &ensp;<el-button type="text" @click="dialogCate = true">
                    编辑
                </el-button>&ensp;
                <el-dialog title="修改分类" :visible.sync="dialogCate">
                    <el-form >
                        <el-form-item label="分类名称：" :label-width="formLabelWidth">
                            <el-input  autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogCate = false">取 消</el-button>
                        <el-button type="primary" @click="dialogCate = false">确 定</el-button>
                    </div>
                </el-dialog>
                <el-button type="text">
                    删除
                </el-button>
                </span>
            </span>
            </el-tree>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            data: [
                {
                    label: '手机',
                    children: [
                        {
                            label: '手机通讯',
                            children: [
                                {
                                    label: '手机'
                                },
                                {
                                    label: '游戏手机'
                                }
                            ]
                        },
                        {
                            label: '手机配件',
                            children: [
                                {
                                    label: '手机壳'
                                },
                                {
                                    label: '手机贴膜'
                                }
                            ]
                        },
                    ]
                },
                {
                    label: '相机',
                    children: [
                        {
                            label: '摄影摄像',
                            children: [
                                {
                                    label: '数码相机'
                                },
                                {
                                    label: '微单相机'
                                }
                            ]
                        },
                        {
                            label: '数码配件',
                            children: [
                                {
                                    label: '存储卡'
                                },
                                {
                                    label: '三角架'
                                }
                            ]
                        },
                    ]
                }, 
                {
                    label: '电脑',
                    children: [
                        {
                            label: '电脑整机',
                            children: [
                                {
                                    label: '笔记本'
                                },
                                {
                                    label: '游戏本'
                                }
                            ]
                        },
                        {
                            label: '电脑配件',
                            children: [
                                {
                                    label: '显示器'
                                },
                                {
                                    label: 'CPU'
                                }
                            ]
                        },
                    ]
                }, 
            ],
            dialogCate: false,
            formLabelWidth: '120px',
            dialogAddCate: false,
            dialogAddCateGroup: false
        }
    },
    methods: {

    },
    created() {

    }
}
</script>

<style scoped>

</style>
